<template>
  <div>
    <el-card>
      <el-form ref="elFrom" :model="form" label-width="120px" :rules="rule">
        <el-form-item label="普通" prop="name" required>
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="树组">
          <el-tree-select v-model="form.selectTree" filterable :data="selectData" :render-after-expand="false" />
        </el-form-item>
        <el-form-item label="联级">
          <el-cascader v-model="form.cascader" :options="options" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit(elFrom)">Create</el-button>
          <el-button>Cancel</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { FormRules, FormInstance } from 'element-plus';
import { selectData, options } from './data';
const elFrom = ref<FormInstance>();
const form = ref({
  name: '',
  selectTree: '',
  cascader: '',
});
//! 测试自定义检验
const validatePass = (_rule: any, value: any, callback: any) => {
  if (value == 111) {
    callback(new Error('Please input '));
  }
  if (value == '') {
    callback(new Error('请输入'));
  }
};
const rule = ref<FormRules>({
  name: [{ required: true, validator: validatePass, trigger: ['blur', 'change'] }],
});

const onSubmit = (elFrom) => {
  if (!elFrom) return;
  elFrom.validate((valid) => {
    console.log(valid);
  });
  console.log(form.value);
};
</script>

<style scoped lang="scss"></style>
